<template>
  <div class="bus-apply page">
    <div class="form">
      <text-input label="出差事由" class="plane"  v-model="apply.info" icon="iconkaohejilu"></text-input>
      <div class="items">
        <div class="item" v-for="(item,index) in apply.items" :key="index">
          <div class="del" @click="delApply(index)" v-if="index>0">
            删除行程 {{index+1}}
          </div>
          <text-input class="plane" :value="parseTime(item.startDate)" @click.native="showStartDate(index)" :disable="true" label="开始时间"></text-input>
          <text-input class="plane" :value="parseTime(item.endDate)" @click.native="showEndDate(index)" :disable="true" label="结束时间"></text-input>
          <text-input class="plane" :value="item.hours"  :disable="true" label="总共时间"></text-input>
          <text-input class="plane"  v-model="item.startPlace"   label="出发地"></text-input>
<!--          <text-input class="plane"  v-model="item.midPlace" desc="没有可不填"  label="途径地"></text-input>-->
          <text-input class="plane"  v-model="item.endPlace"   label="目的地"></text-input>
          <!--      <label-switch class="plane" :alias="['请假','出差']" v-model="apply.type" label="类型"></label-switch>-->
          <text-input class="plane"  :value="item.tripType" @click.native="showTripType(index)" :disable="true" label="出行路径"></text-input>
          <text-input class="plane"  :value="item.tripWay" @click.native="showTripWay(index)" :disable="true" label="出行方式"></text-input>
        </div>
      </div>
<!--      <text-input class="plane" :value="apply.hours"  :disable="true" label="总共时间"></text-input>-->
      <div class="add" @click="addApply">添加行程</div>
      <div @click="confirm" class="btn plane" v-if="canEdit">提交</div>
<!--      <span class="more" @click="more()">申请记录</span>-->
    </div>
  </div>
</template>

<script>
import textInput from '../../../components/form/text-input'
// import textArea from '../../../components/form/text-area'
// import labelSwitch from '../../../components/form/label-switch'
import { getBus, applyBus, options, totalHour } from '../../../api/apply'
import { parseTime } from '../../../util/time'
import { showCorrect } from '../../../dialog'
import { mapState } from '_vuex@3.6.2@vuex'
export default {
  components: {
    textInput
  },
  computed: {
    ...mapState({
      uid: state => state.user.id
    }),
    canEdit () {
      if (!this.apply.id) {
        return true
      }
      // else {
      //   if (this.apply.status == 0 && this.apply.userId == this.uid) {
      //     return true
      //   }
      // }
      return false
    }
  },
  mounted () {
    // this.dateSegmentPicker = this.$createSegmentPicker({
    //   data: this.dateSegmentData,
    //   onSelect: (selectedDates, selectedVals, selectedTexts) => {
    //     this.apply.startDate = selectedDates[0]
    //     this.apply.endDate = selectedDates[1]
    //   },
    //   onNext: (i, selectedDate, selectedValue, selectedText) => {
    //     this.dateSegmentData[1].min = new Date(selectedDate.getTime() + 1000 * 60 * 60 * 24)
    //     if (i === 0) {
    //       this.dateSegmentPicker.$updateProps({
    //         data: this.dateSegmentData
    //       })
    //     }
    //   }
    // })
  },
  created () {
    this.apply.id = this.$route.query.id
    this.apply.type = parseInt(this.$route.query.type)
    options().then(res => {
      this.leaveTypeOptions = res.data.leaveTypeOptions
      this.leaveTypeMap = res.data.leaveTypeOptions.map((r, index) => {
        return { text: r, value: index }
      })
    })
    if (this.apply.id) {
      getBus(this.apply.id).then(res => {
        this.apply = res.data
      })
    }
  },
  methods: {
    addApply () {
      this.apply.items.push({
        leaveType: null,
        startDate: null,
        endDate: null,
        info: null,
        hours: null,
        startPlace: null,
        midPlace: null,
        endPlace: null,
        tripType: null,
        tripWay: null
      })
    },
    delApply (index) {
      this.apply.items.splice(index)
    },
    parseTime (time) {
      return parseTime(time, '{y}.{m}.{d} {h}:{i}:{s}')
    },
    showTripType (index) {
      this.index = index
      const data = this.tripTypeOptions.map(m => {
        const t = { text: m, value: m }
        return t
      })
      if (!this.tripTypePicker) {
        this.tripTypePicker = this.$createPicker({
          title: '出差路径',
          data: [data],
          onSelect: this.selectTripType
        })
      }
      this.tripTypePicker.show()
    },
    selectTripType (val) {
      this.apply.items[this.index].tripType = val.join()
    },
    selectTripWay (val) {
      this.apply.items[this.index].tripWay = val.join()
    },
    showTripWay (index) {
      this.index = index
      const data = this.tripWayOptions.map(m => {
        const t = { text: m, value: m }
        return t
      })
      if (!this.tripWayPicker) {
        this.tripWayPicker = this.$createPicker({
          title: '出差方式',
          data: [data],
          onSelect: this.selectTripWay
        })
      }
      this.tripWayPicker.show()
    },
    getHours () {
      if (!this.apply.items[this.index].startDate || !this.apply.items[this.index].endDate) {
        return
      }
      totalHour(parseTime(this.apply.items[this.index].startDate), parseTime(this.apply.items[this.index].endDate)).then(res => {
        this.apply.items[this.index].hours = res.data
      })
    },
    more () {
      this.$router.push('/apply/bus/list?type=' + this.apply.type + '&top=' + 0)
    },
    showStartDate (index) {
      this.index = index
      if (!this.startDateTimePicker) {
        this.startDateTimePicker = this.$createDatePicker({
          title: '开始时间',
          min: new Date(),
          max: new Date(2030, 11, 31, 0, 0, 0),
          value: new Date(),
          columnCount: 4,
          onSelect: this.selectStartDate
        })
      }
      this.startDateTimePicker.show()
    },
    showEndDate (index) {
      this.index = index
      if (!this.endDateTimePicker) {
        this.endDateTimePicker = this.$createDatePicker({
          title: '结束时间',
          min: this.min,
          max: new Date(2030, 11, 31, 0, 0, 0),
          value: new Date(),
          columnCount: 4,
          onSelect: this.selectEndDate
        })
      }
      this.endDateTimePicker.show()
    },
    selectStartDate (date, selectedVal, selectedText) {
      this.apply.items[this.index].startDate = date
      this.min = new Date()
      this.getHours()
    },
    selectEndDate (date, selectedVal, selectedText) {
      this.apply.items[this.index].endDate = date
      this.getHours()
    },
    confirm () {
      // this.apply.startDate = parseTime(this.apply.startDate)
      // this.apply.endDate = parseTime(this.apply.endDate)
      this.apply.items.forEach(item => {
        item.startDate = parseTime(item.startDate)
        item.endDate = parseTime(item.endDate)
      })
      applyBus(this.apply).then(res => {
        this.apply = res.data
        showCorrect('提交成功,等待审核').then(res => {
          this.$router.push({
            path: '/apply/bus/list',
            query: {
              type: this.apply.type,
              top: 0
            }
          })
        })
      })
    }
  },
  data () {
    return {
      index: null,
      hours: 0,
      alias: {
        value: 'name',
        text: 'val'
      },
      tripWayOptions: ['飞机', '火车', '汽车', '自驾', '其它'],
      tripTypeOptions: ['单程', '往返'],
      leaveTypeOptions: [],
      leaveTypeMap: [],
      min: new Date(),
      dateSegmentData: [
        {
          is: 'cube-date-picker',
          title: '开始时间',
          min: new Date(2008, 7, 8, 8, 0, 0),
          max: new Date(2030, 11, 31, 0, 0, 0)
        },
        {
          is: 'cube-date-picker',
          title: '就职时间',
          min: new Date(2008, 7, 8, 8, 0, 0),
          max: new Date(2030, 11, 31, 0, 0, 0)
        }
      ],
      apply: {
        info: null,
        hours: null,
        items: [
          {
            leaveType: null,
            startDate: null,
            endDate: null,
            info: null,
            startPlace: null,
            midPlace: null,
            endPlace: null,
            tripType: null,
            hours: null,
            tripWay: null
          }
        ]
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  .bus-apply
    .form
      padding-bottom 20px
      margin-top 20px
      .items
        .item
            .del
              background-color #C3C2C0
              color white
              font-size 12px
              display flex
              align-items center
              justify-content center
              margin-top 20px
              padding 5px 0
      .plane
        margin-top 15px
      .btn
        margin-top 20px
        height:44px;
        background:rgba(0,156,78,1);
        border-radius:20px;
        dpr-font(14Px)
        color white
        display flex
        align-items center
        justify-content center
    .add
      display flex
      align-items center
      justify-content center
      font-size 18px
      color blueviolet
      margin-top 20px
    .more
      margin-top 20px
      color gray
      display flex
      align-items center
      justify-content center
      dpr-font(12Px)
</style>
